<template>
    <div class="auth-container">
      <el-card class="auth-card">
        <template #header>
          <div class="card-header">
            <span>{{ isLogin ? '登录' : '注册' }}</span>
            <el-button text @click="toggleMode">{{ isLogin ? '去注册' : '去登录' }}</el-button>
          </div>
        </template>
        <el-form :model="form" ref="formRef" label-width="80px">
          <el-form-item label="账号" prop="username" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
            <el-input type="password" v-model="form.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="role" :rules="[{ required: true, message: '请选择角色', trigger: 'change' }]">
            <el-select v-model="form.role" placeholder="请选择角色">
              <el-option label="用户" value="user"></el-option>
              <el-option label="管理员" value="admin"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">{{ isLogin ? '登录' : '注册' }}</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { useUserStore } from '../stores/user'
  import { ElMessage } from 'element-plus'
  
  const router = useRouter()
  const userStore = useUserStore()
  
  const isLogin = ref(true)
  const formRef = ref(null)
  const form = reactive({
    username: '',
    password: '',
    role: 'user'
  })
  
  const toggleMode = () => {
    isLogin.value = !isLogin.value
    form.username = ''
    form.password = ''
    form.role = 'user'
    formRef.value?.resetFields()
  }
  
  const handleSubmit = async () => {
    formRef.value.validate(async (valid) => {
      if (valid) {
        if (isLogin.value) {
          try {
            await userStore.login(form.username, form.password, form.role)
            ElMessage.success('登录成功！')
            if (userStore.role === 'ADMIN') {
              router.push('/admin/dashboard')
            } else {
              router.push('/user/submit')
            }
          } catch (error) {
            ElMessage.error(error.message || '登录失败，请检查账号密码和角色！')
          }
        } else {
          ElMessage.warning('注册功能正在开发中，请使用现有账号登录 (admin1/123456 或 user1/123456)。')
        }
      } else {
        ElMessage.error('请填写完整的表单信息！')
      }
    })
  }
  </script>
  
  <style scoped>
  .auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 60px);
    background-color: #f0f2f5;
  }
  
  .auth-card {
    width: 400px;
    max-width: 90%;
    text-align: center;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>